<template>
  <m-card :icon="icon" :title="title" class="list-card">
    <div class="list-card pt-3">
      <!-- nav-cate -->
      <div class="nav pt-3 pb-3 jc-between">
        <div
          class="nav-item"
          :class="{active: activeIndex === i}"
          v-for="(category, i) in categories"
          :key="i"
          @click="$refs.list.$swiper.slideTo(i)"
        >
          <div class="nav-link">{{category.name}}</div>
        </div>
      </div>
      <swiper ref="list" :options="{autoHeight:true}" @slide-change="()=> activeIndex = $refs.list.$swiper.realIndex">
        <swiper-slide v-for="(category, index) in categories" :key="index">
          <slot name="items" :category="category"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </m-card>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    categories: {
      type: Array,
      required: true
    }
  },
  data(){
    return {
      activeIndex: 0
    }
  }
};
</script>

<style>
</style>